<template>
    <div class="tag-group" style="margin-left: 10px">
        <el-tag
            v-for="(tag, index) in tags"
            :key="tag.name"
            :closable="tag.name !== 'home' "
            :effect=" $route.name === tag.name ? 'dark' : 'plain' "
            @click="changeMenu(tag)"
            @close="handleClose(tag, index)"
            size="small"
        >{{ tag.label }}
        </el-tag>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
    name: 'CommonTag',
    data() {
        return {}
    },
    methods: {
        ...mapMutations(['closeTag']),
        // click tag to the site
        changeMenu(tag) {
            this.$router.push(tag.path)
        },
        // 点击删除tag按钮后的跳转
        handleClose(tag, index) {
            this.closeTag(tag)
            const length = this.tags.length
            // 删除之后的跳转
            if (tag.name !== this.$route.name) {
                return
            }
            if (index === length) {
                this.$router.push({
                    name: this.tags[index - 1].name
                })
            } else{
                this.$router.push({
                    name: this.tags[index].name
                })
            }
        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabsList
        })
    }
}
</script>

<style scoped lang="less">
.tag-group{
    padding: 20px;
    .el-tag {
        margin-left: 15px;
        cursor: pointer;
    }
}
</style>
